<template>
	<view>
		<view class="bgcolor border-radius-bottom"></view>
		<view class="con" style="margin-top:-30px;padding-bottom:120rpx;">
			<view class="titleview ">
				<view class="dflex " style="font-size: 32rpx;">
					基础信息<text class="fucoor margin-left-xxs">必填</text>
				</view>
				<view>
					<view class="dflex border-bottom margin-top-lg">
						<text class="topred">*</text>性别
						<view @click="tapMap(0)" class="dflex margin-left-lg">
							男<image mode="widthFix" class="dflex imgw margin-left-xxs" :src="pindex==0?'/static/nan.png':'/static/nans.png'"></image>
						</view>
						<view @click="tapMap(1)" class="dflex margin-left-lg">
							女<image mode="widthFix" class="dflex imgw margin-left-xxs" :src="pindex==1?'/static/nan.png':'/static/nans.png'"></image>
						</view>
					</view>
					<view class="dflex border-bottom margin-top-lg">
						<text class="topred">*</text>姓名
						<input v-model="user_name" class="padding-left-lg" placeholder-style="color:#8E8E8E;font-size:28rpx;" placeholder="填写尺寸所有者姓名">
					</view>
					<view class="dflex border-bottom margin-top-lg">
						<text class="topred">*</text>身高
						<input v-model="height" class="padding-left-lg" placeholder-style="color:#8E8E8E;font-size:28rpx;" placeholder="重要信息请如实选择">
					</view>
					<view class="dflex border-bottom margin-top-lg">
						<text class="topred">*</text>体重
						<input v-model="weight" class="padding-left-lg" placeholder-style="color:#8E8E8E;font-size:28rpx;" placeholder="重要信息请如实选择">
					</view>
					<view class="dflex margin-top-lg">
						<text class="topred">*</text>年龄
						<input v-model="age" class="padding-left-lg" placeholder-style="color:#8E8E8E;font-size:28rpx;" placeholder="点击输入真实年龄">
					</view>
				</view>
			</view>
				<view v-for="(items,h,iq) in yifidata" :key="iq">
					<view class="titleview margin-top-sm" style="font-size: 24rpx;">
						<view class="dflex " style="font-size: 32rpx;">
							{{h}}<text class="fucoor margin-left-xxs">必填</text>
						</view>
						<view class="dflex-a margin-top-sm">
							<view @click="tapbody(item,k,h,iq)" v-for="(item,k) in items" :key="k" :class="item.cls?'activee':''" class="dflex-flow-c dflex">
								<image mode="widthFix" class="dflex imgtixin" :src="item.img"></image>
								{{item.group_spec}}
							</view>
						</view>
					</view>
				</view>
			
		</view>
		<view @click="tapstart" class="start dflex-c">
			开始量体
		</view>
		<use-popup v-model="show" bgclass=" " centerStyle borderRadius="20" mode="center">
			<view class="textmode">
				<view class="title dflex-c padding-top-sm">
					<text class="topred ">*</text>请再次确认以下信息
				</view>
				<view class="margin-left-lg margin-right-lg">
					<view class="dflex border-bottom margin-top-lg">
						性别
						<view class="dflex margin-left-lg">
							{{pindex==1?'女':'男'}}
						</view>
					</view>
					<view class="dflex border-bottom margin-top-lg">
						姓名
						<view class="padding-left-lg flex1">{{user_name}}</view>
					</view>
					<view class="dflex border-bottom margin-top-lg">
						身高
						<view class="padding-left-lg flex1">{{height}}</view>
						<view class="padding-left-lg">厘米</view>
					</view>
					<view class="dflex border-bottom margin-top-lg">
						体重
						<view class="padding-left-lg flex1">{{weight}}</view>
						<view class="padding-left-lg">斤</view>
					</view>
					<view class="dflex margin-top-lg border-bottom">
						年龄
						<view class="padding-left-lg flex1">{{age}}</view>
						<view class="padding-left-lg">岁</view>
					</view>
					
					<view v-for="(item,g,d) in yifidata" :key="d" class="dflex margin-top-lg border-bottom">
						{{g}}
						<view v-if="newArr[d]" class="padding-left-lg flex1">{{newArr[d].items.properties.group_spec}}</view>
					</view>
					
				</view>
				<view class="dflex margin-top-lg">
					<view @click="show = false" class="flex1 heiogh centel dflex-c">取消</view>
					<view @click="toMassing" class="flex1 heiogh com dflex-c">确认</view>
				</view>
			</view>
		</use-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexs:[],
				allinfo:{},
				newArr:[],
				tindex:"",
				manarr:"",
				grarr:"",
				show:false,
				pindex:0,
				height:"",
				weight:"",
				age:"",
				user_name:"",
				yifidata:[],
				keyarr:[]
			}
		},
		onLoad(option) {
			uni.showLoading()
			 
			let nanarr =[]
			let nvarr =[]
			this.$func.usemall.call('aibody/index/getinfo').then(res=>{
				uni.hideLoading()
				if(res.code == 200){
					res.datas.data.map(item=>{
						if(item.sex_id==1){
							nanarr.push(item)
						}else{
							nvarr.push(item)
						}
					})
					this.yifidata=  this.manarr =  nanarr.reduce((acc, item) => {
						if(item.is_delete==0){
								if (!acc[item.group_name]) {
									acc[item.group_name] = [];
								}
								 acc[item.group_name].push(item);
								 return acc;
						}
					}, {});
					this.grarr =  nvarr.reduce((acc, item) => {
						if(item.is_delete==0){
							if (!acc[item.group_name]) {
								acc[item.group_name] = [];
							}
							 acc[item.group_name].push(item);
							 return acc;
						}
					}, {});
				}
				if(option.id){
					this.getdata(option.id)	
				}
			})
		},
		methods: {
			getdata(id){
				uni.showLoading()
				this.$func.usemall.call('aibody/index/getsize',{
					id
				}).then(res=>{
					console.log(res.datas.data[0],"aaa")
					let data = res.datas.data[0]
					this.allinfo=data
					this.pindex = data.sex_id==1?0:1
					this.user_name = data.user_name
					this.height = data.height
					this.weight = data.weight
					this.age = data.age
					if(this.pindex==1){
						this.indexitem(data,this.grarr)
					}else{
						this.indexitem(data,this.yifidata)
					}
					uni.hideLoading()
				})
			},
			indexitem(data,indata){
				this.newArr = data.groups
				for(var key in indata){
					data.groups.map(item=>{
						this.yifidata[key].map(items=>{
							if(items.group_name==item.items.properties.group_name&&items.group_spec==item.items.properties.group_spec){
								items.cls=1
								this.indexs.push(items.group_name)
							}
						})
					})
				}
			},
			toMassing(){
				var data = {
					sex_id:this.pindex==1?0:1,
					height:this.height,
					weight:this.weight,
					age:this.age,
					user_name:this.user_name
				}
				uni.setStorageSync('aiInfo',{
					info:data,
					body:this.newArr,
					back_imgobj:this.allinfo.back_imgobj,
					front_imgobj:this.allinfo.front_imgobj,
					side_imgobj:this.allinfo.side_imgobj
				})
				uni.navigateTo({
					url:"./ai-massing"
				})
			},
			tapstart(){
				if(!this.user_name){
					uni.showToast({
						title:"输入姓名",
						icon:"none"
					})
					return
				}
				
				if(!this.height){
					uni.showToast({
						title:"输入身高",
						icon:"none"
					})
					return
				}
				if(!this.weight){
					uni.showToast({
						title:"输入体重",
						icon:"none"
					})
					return
				}
				if(!this.age){
					uni.showToast({
						title:"输入年龄",
						icon:"none"
					})
					return
				}
				
				this.keyarr=[]
				for( var key in this.yifidata){
					this.keyarr.push(key)
				}
				 
				// this.indexs =[]
				this.newArr.map((items,indext)=>{
					this.keyarr.map((item,index)=>{
						if(items.items.properties.group_name == item){
							this.indexs.push(item)
						}
					})
				})
				let result = this.keyarr.filter(item => !this.indexs.includes(item));
				
				if(result.length){
					uni.showToast({
						title:'选择'+result[0],
						icon:"none"
					})
					return
				}
			
				console.log(this.newArr,"hhhh")
				this.show=true
				
				
				
			},
			tapMap(index){
				this.pindex=index
				
				this.newArr=[]
				for(var key in this.yifidata){
						this.yifidata[key].map(item=>{
						item.cls=0
					})
				}
				
				if(index){
					this.yifidata=this.grarr
				}else{
					this.yifidata=this.manarr
				}
			},
			tapbody(item,index,dex,i){
				this.yifidata[dex].map(items=>{
					items.cls=0
				})
				this.yifidata[dex][index].cls=1
				this.newArr[i] = {
					items:{
						properties:{
							group_name:item.group_name,
							group_spec:item.group_spec
						} 
					}
				}
				this.$forceUpdate()
			},
			
		}
	}
</script>

<style>
	page{
		font-weight: bold;
		background: #EFEFEF;
	}
	
	.centel{
		background: #E8E8E8;
		color:#00724C;
	}
	.com{
		color:#fff;
		background: #00724C;
	}
	.heiogh{
		height:80rpx;
	}
	.title{
		color:#00724C;
		font-size: 32rpx;
	}
	.textmode{
		width: 650rpx;
		background: #fff;
	}
	.start{
		position: fixed;
		width:100%;
		bottom: 0;
		color:#fff;
		font-weight: bold;
		height: 90rpx;
		background: #00724C;
	}
	.imgtixin{
		width: 133rpx;
		height:10px;
	}
	.border-bottom{
		padding-bottom: 20rpx;
		border-bottom:1px solid #EEEFF3;
	}
	.imgw{
		width: 30rpx;
	}
	.topred{
		color:red;
	}
	.fucoor{
		color:#8E8E8E;
		font-size: 12px;
	}
	.con{
		width:92%;
		margin: auto;
	}
	.titleview{
		border-radius: 10px;
		padding: 10px;
		background: #fff;
	}
	.bgcolor{
		background: #00724C;
		height:44px;
	}
	.activee{
		border:1px solid #00724C;
		color:#00724C;
	}
</style>
